<template>
  <div class="home">
    <div id="map"></div>
    <div class=""></div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "HomeView",
  data() {
    return {
      map: null,
      appid: "4a248891641a4b9d9dd8ad7f74e5df22",
      projection: "EPSG:4326",
      matrixIds: [],
      proj1: null,
      maxResolution: 1.8712842777446113,
      origin: [-400.0, 400.0],
      resolutions: [],
      layer: new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: new ol.style.Style({
          fill: new ol.style.Fill({
            color: "rgba(255, 0, 0, 0.5)",
          }),
          stroke: new ol.style.Stroke({
            color: "red",
            width: 2,
          }),
        }),
      }),
      vectorLayer: new ol.layer.Vector({
        source: new ol.source.Vector(),
      }),
      rltvector:new ol.layer.Heatmap({
      //矢量数据源（读取本地的KML数据）
      source: new ol.source.Vector({
        url: '/2012_Earthquakes_Mag5.kml',
        format: new ol.format.KML({
          extractStyles: false
        })
      }),
      //热点半径
      radius: parseInt(null, 10),
      //模糊尺寸
      blur: parseInt(null, 10)
    })
    };
  },
  components: {},
  methods: {
    initMap: function () {
      console.log(this);

      this.map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.WMTS({
              url:
                "http://223.243.100.141:35917/geowebcache/gishub/group/yeshi:1/wmts?" +
                this.appid,
              layer: "yeshi_bak:1@gishub@705856",
              matrixSet: "c",
              format: "image/png",
              projection: this.projection,
              tileGrid: new ol.tilegrid.WMTS({
                origin: [this.origin[0], this.origin[1]],
                resolutions: this.resolutions,
                matrixIds: this.matrixIds,
              }),
              style: "",
              wrapX: true,
            }),
          }),
          new ol.layer.Vector({
            source: new ol.source.Vector(),
            style: function (feature, resolution) {
              switch (feature.get("layer")) {
                case "poi":
                  poiStyle.getText().setText(feature.get("name"));
                  return poiStyle;
                case "boundary":
                  return boundaryStyle;
                case "lawn":
                  return lawnStyle;
                case "road":
                  roadStyle.getText().setText(feature.get("name"));
                  return resolution < 2 ? roadStyle : null;
                case "building":
                  return buildingStyle(feature, resolution);
                case "other":
                  otherStyle.getText().setText(feature.get("name"));
                  return otherStyle;
                default:
                  return null;
              }
            },
          }),
          this.layer,
          this.vectorLayer,
          this.rltvector,
        ],
        view: new ol.View({
          center: [116.529358, 31.736109],
          // center: ol.proj.transform([116.529358, 31.736109], 'EPSG:4326', 'EPSG:3857'),
          projection: "EPSG:4326",
          zoom: 17,
        }),
        target: "map",
      });
      //监听缩放级别  经纬度
      this.map.on(
        "pointermove",
        function (e) {
          var coods;
          coods = ol.proj.transform(e.coordinate, "EPSG:3857", "EPSG:4326");
          // $(".getlatlng").html('经度：' + coods[0].toFixed(4) + '纬度:' + coods[1].toFixed(4))
        }.bind(this)
      );
      this.map.on("moveend", function (e) {
        // $(".getzoom").html(map.getView().getZoom())
      });
    },
  },
  mounted() {
    console.log(ol);
    if (this.projection == "EPSG:4490" || this.projection == "EPSG:4326") {
      this.projection = "EPSG:4326";
      this.proj1 = ol.proj.get("EPSG:4326");
    } else {
      this.proj1 = ol.proj.get(this.projection);
    }

    if (!this.maxResolution) {
      this.maxResolution = ol.extent.getWidth(this.proj1.getExtent()) / 256;
    }
    if (!this.origin) {
      this.origin = ol.extent.getTopLeft(this.proj1.getExtent());
    }

    for (let i = 0; i < 20; i++) {
      this.matrixIds[i] = "c" + ":" + i;
      this.resolutions[i] = this.maxResolution / Math.pow(2, i);
    }
    this.initMap();
  },
};
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
  position: fixed;
}
</style>
